Skip to content

Commit

Permalink
update index.html and script.js: improve accessibility by standardizi…
Browse files Browse the repository at this point in the history 
…ng text casing and enhancing language translation functionality with additional services
  • Loading branch information
@Martin-Atanasov123
Martin-Atanasov123 committed Jan 3, 2025
1 parent d7c1528 commit 3e3bff5
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 43 deletions.
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
</a>
<ul>
<li><a href="#section1">Home</a></li>
<li><a href="#section2">About Us</a></li>
<li><a href="#section2">About us</a></li>
<li><a href="#section3">Services</a></li>
<li><a href="#section4">Gallery / Price</a></li>
<!-- <li><a href="#section5">Price</a></li> -->
Expand Down Expand Up @@ -55,7 +55,7 @@
</nav>
</aside>
</section>
<h1 id="title">Precision and Quality in Every Sharpening</h1>
<h1 id="title">Precision and quality in every sharpening</h1>

<a id="seemore" href="#section2">SEE MORE</a>
</section>
Expand Down
17 changes: 6 additions & 11 deletions things/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,9 @@ nav ul li a {
}

.introduction h1 {
font-size: 3.7em;
font-size: 3.9em;
text-wrap: nowrap;
text-shadow: 3px 10px 10px#000000;
color: #f5eaea;
margin: 3em;

Expand Down Expand Up @@ -156,20 +158,15 @@ nav ul li a {
padding: 1em;
}

#nz {
height: 600px;
width: 400px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}




#section3 {

background-color: #494949;
border-top: 3px solid #000000;
border-bottom: 3px solid #000000;

padding: 9em;
width: 100%;
Expand Down Expand Up @@ -255,7 +252,6 @@ nav ul li a {
border-radius: 35px;
border: 1em solid #733635;
background-color: #905D5D;
width: 90%;
padding: 2em;
margin: 1em;
}
Expand All @@ -276,7 +272,7 @@ nav ul li a {
}

.column-container p {
width: 60%;
width: 80%;
font-size: large;
padding: 1em;
color: #d1caca;
Expand Down Expand Up @@ -366,7 +362,6 @@ nav ul li a {
display: flex;
flex-direction: column;
justify-self: center;
width: 90%;
padding: 1em;
margin: 1em;
justify-content: center;
Expand Down
89 changes: 59 additions & 30 deletions things/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ document.querySelectorAll('nav a').forEach(anchor => {
const translations = {
bg: {
button: "Смени езика",
title: "Прецизност и качество във всяко заточване!",
title: "Прецизност и качество във всяко заточване",
aboutUs: "За нас",
description: "Ние сме професионални точила, които се грижат за вашите инструменти и ножове с внимание и прецизност.С дългогодишен опит в занаята, нашата мисия е да предоставим на всеки клиент перфектно заточени инструменти, които работят като нови.Независимо дали става дума за домакински ножове, професионални инструменти или специализирани остриета, можете да ни се доверите. Използваме само най-висококачествените методи и материали за осигуряване на дълготрайни и надеждни резултати.",
services: "Услуги",
Expand All @@ -46,7 +46,13 @@ const translations = {
contactLocation: "Местоположение: Плевен, България",
allRightsReserved: "Всички права запазени",
createdBy: "_Създадено от <a href=\"mailto:matanasov573@gmail.com\">Мартин Атанасов</a>_",
copyright: "Авторско право &copy; 2024 Заточвач"
copyright: "Авторско право &copy; 2024 Заточвач",
service1: "Заточване на всички видове остриета",
service2: "Всички видове ножици",
service3: "Мечове и саби",
service4: "Възстановяване на стари ножове",
service5: "Дръжки",
service6: "Специални поръчки"
},
en: {
button: "Change Language",
Expand All @@ -60,7 +66,7 @@ const translations = {
priceTitle: "Price",
priceDescription: "Criteria for evaluating the restoration of the item. For each knife, they are personal and depend on the condition of the knife itself and the customer's requests, and subsequently it is calculated how much everything will cost.",
navHome: "Home",
navAboutUs: "About Us",
navAboutUs: "About us",
navServices: "Services",
navGalleryPrice: "Gallery / Price",
navContact: "Contact",
Expand All @@ -77,7 +83,13 @@ const translations = {
contactLocation: "Location: Pleven, Bulgaria",
allRightsReserved: "All rights reserved",
createdBy: "_Created by <a href=\"mailto:matanasov573@gmail.com\">Martin Atanasov</a>_",
copyright: "Copyright &copy; 2024 Sharpener"
copyright: "Copyright &copy; 2024 Sharpener",
service1: "Sharpening of all types of blades",
service2: "All types of scissors",
service3: "Swords and sabers",
service4: "Restoration of old knives",
service5: "Handles",
service6: "Special orders"
}
};

Expand All @@ -92,12 +104,30 @@ const descriptionElement = document.querySelector(".about-us p");
const servicesElement = document.querySelector(".services h2");
const servicesdescriptionElement = document.querySelector(".services p");

const service1Element = document.querySelector(".services ul:nth-child(1) li:nth-child(1)");
const service2Element = document.querySelector(".services ul:nth-child(1) li:nth-child(2)");
const service3Element = document.querySelector(".services ul:nth-child(1) li:nth-child(3)");
const service4Element = document.querySelector(".services ul:nth-child(2) li:nth-child(1)");
const service5Element = document.querySelector(".services ul:nth-child(2) li:nth-child(2)");
const service6Element = document.querySelector(".services ul:nth-child(2) li:nth-child(3)");

const galleryTitleElement = document.querySelector(".gallery h2");
const galleryDescriptionElement = document.querySelector(".gallery p");

const priceTitleElement = document.querySelector(".price-list h2");
const priceDescriptionElement = document.querySelector(".price-list p");

const contactTitleElement = document.querySelector(".contact h2");
const contactEmailElement = document.querySelector(".contact p:nth-child(2)");
const contactPhoneElement = document.querySelector(".contact p:nth-child(3)");
const contactLocationElement = document.querySelector(".contact p:nth-child(4)");
const allRightsReservedElement = document.querySelector(".contact p:nth-child(5)");

const createdByElement = document.querySelector("#creator p:nth-child(1)");
const copyrightElement = document.querySelector("#creator p:nth-child(2)");



const navHomeElement = document.querySelector("nav ul li a[href='#section1']");
const navAboutUsElement = document.querySelector("nav ul li a[href='#section2']");
const navServicesElement = document.querySelector("nav ul li a[href='#section3']");
Expand All @@ -106,21 +136,12 @@ const navContactElement = document.querySelector("nav ul li a[href='#section6']"

const seeMoreElement = document.getElementById("seemore");

const socialTitleElement = document.querySelector(".Social h2");
const facebookElement = document.querySelector(".Social a[href*='facebook']");
const instagramElement = document.querySelector(".Social a[href*='instagram']");
const linkedinElement = document.querySelector(".Social a[href*='linkedin']");

const navigationTitleElement = document.querySelector(".navigation h2");

const contactTitleElement = document.querySelector(".contact h2");
const contactEmailElement = document.querySelector(".contact p:nth-of-type(1)");
const contactPhoneElement = document.querySelector(".contact p:nth-of-type(2)");
const contactLocationElement = document.querySelector(".contact p:nth-of-type(3)");
const allRightsReservedElement = document.querySelector(".contact p:nth-of-type(4)");
const socialTitleElement = document.querySelector('.Social h2');
const facebookElement = document.querySelector('a[data-translate="facebook"]');
const instagramElement = document.querySelector('a[data-translate="instagram"]');
const linkedinElement = document.querySelector('a[data-translate="linkedin"]');

const createdByElement = document.querySelector("#creator p:nth-of-type(1)");
const copyrightElement = document.querySelector("#creator p:nth-of-type(2)");
const navigationTitleElement = document.querySelector('.navigation h2');

buttonElement.addEventListener("click", () => {
currentLanguage = currentLanguage === "bg" ? "en" : "bg";
Expand All @@ -130,35 +151,43 @@ buttonElement.addEventListener("click", () => {
aboutUsElement.textContent = translations[currentLanguage].aboutUs;
servicesElement.textContent = translations[currentLanguage].services;
servicesdescriptionElement.textContent = translations[currentLanguage].servicesdescription;
seeMoreElement.textContent = translations[currentLanguage].seeMore;
service1Element.textContent = translations[currentLanguage].service1;
service2Element.textContent = translations[currentLanguage].service2;
service3Element.textContent = translations[currentLanguage].service3;
service4Element.textContent = translations[currentLanguage].service4;
service5Element.textContent = translations[currentLanguage].service5;
service6Element.textContent = translations[currentLanguage].service6;
galleryTitleElement.textContent = translations[currentLanguage].galleryTitle;
galleryDescriptionElement.textContent = translations[currentLanguage].galleryDescription;
priceTitleElement.textContent = translations[currentLanguage].priceTitle;
priceDescriptionElement.textContent = translations[currentLanguage].priceDescription;
buttonElement.textContent = translations[currentLanguage].button;

contactTitleElement.textContent = translations[currentLanguage].contactTitle;
contactEmailElement.textContent = translations[currentLanguage].contactEmail;
contactPhoneElement.textContent = translations[currentLanguage].contactPhone;
contactLocationElement.textContent = translations[currentLanguage].contactLocation;
allRightsReservedElement.textContent = translations[currentLanguage].allRightsReserved;

createdByElement.innerHTML = translations[currentLanguage].createdBy;
copyrightElement.textContent = translations[currentLanguage].copyright;

navHomeElement.textContent = translations[currentLanguage].navHome;
navAboutUsElement.textContent = translations[currentLanguage].navAboutUs;
navServicesElement.textContent = translations[currentLanguage].navServices;
navGalleryPriceElement.textContent = translations[currentLanguage].navGalleryPrice;
navContactElement.textContent = translations[currentLanguage].navContact;

seeMoreElement.textContent = translations[currentLanguage].seeMore;

socialTitleElement.textContent = translations[currentLanguage].socialTitle;
facebookElement.textContent = translations[currentLanguage].facebook;
instagramElement.textContent = translations[currentLanguage].instagram;
linkedinElement.textContent = translations[currentLanguage].linkedin;

navigationTitleElement.textContent = translations[currentLanguage].navigationTitle;

contactTitleElement.textContent = translations[currentLanguage].contactTitle;
contactEmailElement.textContent = translations[currentLanguage].contactEmail;
contactPhoneElement.textContent = translations[currentLanguage].contactPhone;
contactLocationElement.textContent = translations[currentLanguage].contactLocation;
allRightsReservedElement.textContent = translations[currentLanguage].allRightsReserved;

createdByElement.innerHTML = translations[currentLanguage].createdBy;
copyrightElement.textContent = translations[currentLanguage].copyright;
document.querySelectorAll("[data-translate]").forEach(element => {
const key = element.getAttribute("data-translate");
element.textContent = translations[currentLanguage][key];
});
});


0 comments on commit 3e3bff5

Please sign in to comment.