From d2d2a9f9a5b3a9bc4073103ab81fed902399e14e Mon Sep 17 00:00:00 2001 From: julietoge Date: Wed, 23 Oct 2024 18:53:06 +0100 Subject: [PATCH] update --- js/script.js | 25 +++++++++---------- styles/css/style.css | 30 +++++++++++++++++++++++ styles/css/style.css.map | 2 +- styles/sass/style.scss | 52 ++++++++++++++++++---------------------- 4 files changed, 67 insertions(+), 42 deletions(-) diff --git a/js/script.js b/js/script.js index cf2bbba..64ac009 100644 --- a/js/script.js +++ b/js/script.js @@ -1,21 +1,21 @@ const countDown = () => { - // Set the date for the launch (e.g., December 31, 2024) + // Set the date for the launch (e.g., October 12, 2024) let launchDate = new Date("oct 12, 2024 00:00:00").getTime(); // // let launchDate = new Date().getTime()+ (14 * 24 * 60 * 60 * 1000); - // Get the cuurent Date + // Get the current date let currentDate = new Date().getTime(); - // Get the Difference btw the launchDate from currentDate + // Get the difference between the launchDate and currentDate let timeLeft = launchDate - currentDate; - // Get the second, minute, hour, day - let seconds = 1000; // sec in millisec - let minutes = 60 * seconds; - let hours = 60 * minutes; - let days = 24 * hours; + // Get the seconds, minutes, hours, days in milliseconds + let seconds = 1000; // 1 second = 1000 milliseconds + let minutes = 60 * seconds; // 1 minute = 60 seconds + let hours = 60 * minutes; // 1 hour = 60 minutes + let days = 24 * hours; // 1 day = 24 hours - // Time calculations for days, hours, minutes and seconds + // Time calculations for days, hours, minutes, and seconds let daysNum = Math.floor(timeLeft / days); let hoursNum = Math.floor((timeLeft % days) / hours); let minutesNum = Math.floor((timeLeft % hours) / minutes); @@ -31,15 +31,16 @@ const countDown = () => { document.getElementById("seconds").textContent = (secondsNum < 10 ? "0" : "") + secondsNum; - // If the count down is over, display some text + // If the countdown is over, display a message if (timeLeft < 0) { + // Clear interval to call countDown clearInterval(countDown); const countdownElement = document.querySelector(".countdown"); countdownElement.innerHTML = "we have launched!"; - // countdownElement.classList.add("launched-message"); // Add the styling class + countdownElement.classList.add("launched-message"); // Add the styling class } }; -// set Interval after 1000millsec +// Set interval to call countDown every 1000 milliseconds (1 second) setInterval(countDown, 1000); diff --git a/styles/css/style.css b/styles/css/style.css index efb87d4..eef4fe2 100644 --- a/styles/css/style.css +++ b/styles/css/style.css @@ -137,6 +137,22 @@ main footer .social-icons a:hover { transform: translateY(-5px); } +/* Add this new style for the LAUNCHED! message */ +.launched-message { + color: hsl(345, 95%, 68%); /* Bright orange color */ + text-transform: uppercase; + font-size: 5rem; + font-weight: 700; + word-spacing: normal; + letter-spacing: normal; + animation: blinker 1s infinite; /* Make it blink */ +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} @media (max-width: 992px) and (min-width: 601px) { main { max-width: 768px; @@ -178,6 +194,13 @@ main footer .social-icons a:hover { word-spacing: 0.6rem; letter-spacing: normal; } + .launched-message { + text-transform: uppercase; + font-size: 3.8rem; + font-weight: 700; + word-spacing: normal; + letter-spacing: normal; + } } @media only screen and (max-width: 600px) { main { @@ -228,6 +251,13 @@ main footer .social-icons a:hover { main footer .social-icons { margin-top: 20px; } + .launched-message { + text-transform: uppercase; + font-size: 1.6rem; + font-weight: 700; + word-spacing: normal; + letter-spacing: normal; + } } /*# sourceMappingURL=style.css.map */ diff --git a/styles/css/style.css.map b/styles/css/style.css.map index afbe823..a5247ba 100644 --- a/styles/css/style.css.map +++ b/styles/css/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAeA;EACE;EACA;EACA;;;AAuBF;EACE;;;AAEF;EACE;;;AAGF;EACE,aAtCoB;EAuCpB;EACA;EAEA;EACA;EACA;EACA,OAnDM;EAkBN;EACA;EACA;;;AAmCF;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EAjCF,gBAmC0B;EAlC1B,WAkCqC;EAjCrC,aAiC6C;EAhC7C,cAgCkD;EA/BlD,gBA+B0D;EACtD;;AAEF;EAlDF;EACA;EACA;;AAoDI;EACE;;AAEF;EACE;EACA,kBA5EW;EA6EX;EACA;EACA;EACA;EACA;;AACA;EACE,OAtFC;EAgCT,gBAwD8B;EAvD9B,WAuDyC;EAtDzC,aAsD+C;EArD/C,cAqDoD;EApDpD,gBAoD4D;EACpD;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBAhGO;EAiGP;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBA3GO;EA4GP;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBAvHS;;AAyHX;EA9FJ,gBAgG4B;EA/F5B,WA+FuC;EA9FvC,aA8F6C;EA7F7C,cA6FkD;EA5FlD,gBA4F0D;EACpD,OAlIO;;AAuIb;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EA5HF;EACA;EACA;EA6HI;EACA;;AACA;EACE,OAvJO;EAwJP;EACA;;AACA;EACE,OA1JC;EA2JD;;;AA6BV;EACE;IACE;;EAIE;IA9JJ,gBAgK4B;IA/J5B,WA+JuC;IA9JvC,aA8J+C;IA7J/C,cA6JoD;IA5JpD,gBA4J4D;;EAGtD;IACE;;EAEF;IACE;IACA;;EACA;IACE;IA1KV,gBA2KgC;IA1KhC,WA0K2C;IAzK3C,aAyKmD;IAxKnD,cAwKwD;IAvKxD,gBAuKgE;;EAExD;IACE;IACA;;EAEF;IACE;IACA;;EAGJ;IAtLN,gBAwL8B;IAvL9B,WAuLyC;IAtLzC,aAsLiD;IArLjD,cAqLsD;IApLtD,gBAoL8D;;;AAYhE;EACE;IACE;;EAEE;IAxMJ,gBA0M4B;IAzM5B,WAyMuC;IAxMvC,aAwM6C;IAvM7C,cAuMkD;IAtMlD,gBAsM0D;IACpD;;EAGA;IACE;;EAEF;IACE;IACA;IACA;;EACA;IACE;IAtNV,gBAuNgC;IAtNhC,WAsN2C;IArN3C,aAqNmD;IApNnD,cAoNwD;IAnNxD,gBAmNgE;;EAExD;IACE;IACA;;EAEF;IACE;IACA;;EAGJ;IAlON,gBAoO8B;IAnO9B,WAmOyC;IAlOzC,aAkOiD;IAjOjD,cAiOsD;IAhOtD,gBAgO8D;;EAI5D;IACE;;EACA;IACE","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAeA;EACE;EACA;EACA;;;AAuBF;EACE;;;AAEF;EACE;;;AAGF;EACE,aAtCoB;EAuCpB;EACA;EAEA;EACA;EACA;EACA,OAnDM;EAkBN;EACA;EACA;;;AAmCF;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EAjCF,gBAmC0B;EAlC1B,WAkCqC;EAjCrC,aAiC6C;EAhC7C,cAgCkD;EA/BlD,gBA+B0D;EACtD;;AAEF;EAlDF;EACA;EACA;;AAoDI;EACE;;AAEF;EACE;EACA,kBA5EW;EA6EX;EACA;EACA;EACA;EACA;;AACA;EACE,OAtFC;EAgCT,gBAwD8B;EAvD9B,WAuDyC;EAtDzC,aAsD+C;EArD/C,cAqDoD;EApDpD,gBAoD4D;EACpD;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBAhGO;EAiGP;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBA3GO;EA4GP;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBAvHS;;AAyHX;EA9FJ,gBAgG4B;EA/F5B,WA+FuC;EA9FvC,aA8F6C;EA7F7C,cA6FkD;EA5FlD,gBA4F0D;EACpD,OAlIO;;AAuIb;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EA5HF;EACA;EACA;EA6HI;EACA;;AACA;EACE,OAvJO;EAwJP;EACA;;AACA;EACE,OA1JC;EA2JD;;;AAOV;AACA;EACE,OApKS,oBAoKS;EApIlB,gBAsIsB;EArItB,WAqIiC;EApIjC,aAoIuC;EAnIvC,cAmI4C;EAlI5C,gBAkIoD;EACpD;;;AAEF;EACE;IACE;;;AAOJ;EACE;IACE;;EAIE;IAxJJ,gBA0J4B;IAzJ5B,WAyJuC;IAxJvC,aAwJ+C;IAvJ/C,cAuJoD;IAtJpD,gBAsJ4D;;EAGtD;IACE;;EAEF;IACE;IACA;;EACA;IACE;IApKV,gBAqKgC;IApKhC,WAoK2C;IAnK3C,aAmKmD;IAlKnD,cAkKwD;IAjKxD,gBAiKgE;;EAExD;IACE;IACA;;EAEF;IACE;IACA;;EAGJ;IAhLN,gBAkL8B;IAjL9B,WAiLyC;IAhLzC,aAgLiD;IA/KjD,cA+KsD;IA9KtD,gBA8K8D;;EAM5D;IAxLF,gBA0LsB;IAzLtB,WAyLiC;IAxLjC,aAwLyC;IAvLzC,cAuL8C;IAtL9C,gBAsLsD;;;AAKxD;EACE;IACE;;EAEE;IAnMJ,gBAqM4B;IApM5B,WAoMuC;IAnMvC,aAmM6C;IAlM7C,cAkMkD;IAjMlD,gBAiM0D;IACpD;;EAGA;IACE;;EAEF;IACE;IACA;IACA;;EACA;IACE;IAjNV,gBAkNgC;IAjNhC,WAiN2C;IAhN3C,aAgNmD;IA/MnD,cA+MwD;IA9MxD,gBA8MgE;;EAExD;IACE;IACA;;EAEF;IACE;IACA;;EAGJ;IA7NN,gBA+N8B;IA9N9B,WA8NyC;IA7NzC,aA6NiD;IA5NjD,cA4NsD;IA3NtD,gBA2N8D;;EAI5D;IACE;;EACA;IACE;;EAKJ;IA3OF,gBA6OsB;IA5OtB,WA4OiC;IA3OjC,aA2OyC;IA1OzC,cA0O8C;IAzO9C,gBAyOsD","file":"style.css"} \ No newline at end of file diff --git a/styles/sass/style.scss b/styles/sass/style.scss index f2b0c86..0a2401a 100644 --- a/styles/sass/style.scss +++ b/styles/sass/style.scss @@ -31,7 +31,7 @@ $primary-font-Weight: 700; $size, $weight, $wordSpacing, - $letterSpacing, + $letterSpacing ) { text-transform: $textTransform; font-size: $size; @@ -62,7 +62,7 @@ main { text-align: center; padding-inline: 1rem; max-width: 1400px; - // styling for countdown-section class name within main elements + // styling for countdown-section class name within main elements .countdown-section { height: 70vh; @@ -163,24 +163,18 @@ main { } } -// // /* Add this new style for the LAUNCHED! message */ -// .launched-message { -// font-size: 5rem; -// color: $Soft-red; /* Bright orange color */ -// font-weight: bold; -// text-transform: uppercase; -// animation: blinker 1s infinite; /* Make it blink */ -// } -// @keyframes blinker { -// 50% { -// opacity: 0; -// } -// } - - - - - +/* Add this new style for the LAUNCHED! message */ +.launched-message { + color: $Soft-red; /* Bright orange color */ + // Using mixin to style h1 font + @include font-content(uppercase, 5rem, 700, normal, normal); + animation: blinker 1s infinite; /* Make it blink */ +} +@keyframes blinker { + 50% { + opacity: 0; + } +} // media query @@ -223,9 +217,10 @@ main { } } - // .launched-message { - // font-size: 3.8rem; - // } + .launched-message { + // Using mixin to style h1 font + @include font-content(uppercase, 3.8rem, 700, normal, normal); + } } // /* Extra small devices (phones, 600px and down) */ @@ -245,7 +240,7 @@ main { .time { height: 55px; width: 55px; - margin-bottom: .6rem; + margin-bottom: 0.6rem; h2 { line-height: 55px; @include font-content(uppercase, 1.6rem, 700, normal, normal); @@ -273,9 +268,8 @@ main { } } - // .launched-message { - // font-size: 2.1rem; - // } + .launched-message { + // Using mixin to style h1 font + @include font-content(uppercase, 1.6rem, 700, normal, normal); + } } - -