From 5c1b7dc1888ed7425e5cb549cab4a5d8a2a3806a Mon Sep 17 00:00:00 2001 From: Mahnoor Afteb Date: Sun, 21 Mar 2021 22:36:57 -0400 Subject: [PATCH] added initial wk 9 --- week-9/.DS_Store | Bin 0 -> 8196 bytes week-9/.vscode/settings.json | 3 ++ week-9/stopwatch/.DS_Store | Bin 0 -> 6148 bytes week-9/stopwatch/index.html | 28 ++++++++++ week-9/stopwatch/js/main.js | 53 +++++++++++++++++++ week-9/working-web-form/.DS_Store | Bin 0 -> 6148 bytes week-9/working-web-form/css/form.css | 74 +++++++++++++++++++++++++++ week-9/working-web-form/index.html | 39 ++++++++++++++ week-9/working-web-form/js/main.js | 48 +++++++++++++++++ 9 files changed, 245 insertions(+) create mode 100644 week-9/.DS_Store create mode 100644 week-9/.vscode/settings.json create mode 100644 week-9/stopwatch/.DS_Store create mode 100644 week-9/stopwatch/index.html create mode 100644 week-9/stopwatch/js/main.js create mode 100644 week-9/working-web-form/.DS_Store create mode 100644 week-9/working-web-form/css/form.css create mode 100644 week-9/working-web-form/index.html create mode 100644 week-9/working-web-form/js/main.js diff --git a/week-9/.DS_Store b/week-9/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..88dd51befa3cb5fdb4cd339bfcd2aff17dd3db5b GIT binary patch literal 8196 zcmeHM-HOvd6h5=9nj&g11bdkq?^bAW*}W37Z3TO$MD#*sH)(1cOfsQK4O%M!A42pI zdvoNp%iW}4|q0YG$TK?k4(02U^~=6TF2jQT09 z*^X(sh$xT`P=E(H3}G^e*1Wla6<`He0akz&Ut4=T0aoC@RDhlj zHYP&HV5w0(Ixtfq0Ad}Rm0=m<0L8HlItELPii%_E=s_5&Fd>G}bnLgu9nmpZYSeTP znhwIuEKGzV)a=N!l{*MWBj>CDE3mEr#qJHrFlv{OuEy_j=tt7WUiv}}F!jDF!%`)~ zFS67yKKW@BW_i2)S?tv6XU?9p8u+&yIY^{qzZjysfby7a3QB$oZY5yblV z?#|(>+K0pH@nRWl>6uQpnfa+ZO(L0$aW=ZMCN8UlDLjD?5*WiZtdGD)e5~5zL3CoV z-y`SN%3^Qi|Eo*C@y07Q!bZ;Ows`G+>6vY@1@HSN`4wKpmf1Mh4;zR!k%Nh_)JR3D zt5X<}&wmnxjTJaW3e@zqwkZC;iRT2r2RKEG$Ct_q{3ZoNz3=wBIG8%sD+Z-g-o|u{ qiH!V8jf#TVi5~)3U;bf;WgA_I;}|S8Vhb9-2v9O`#tQsV1-=1;W)UU; literal 0 HcmV?d00001 diff --git a/week-9/.vscode/settings.json b/week-9/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/week-9/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/week-9/stopwatch/.DS_Store b/week-9/stopwatch/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..244698f5f03208c1a8132507e746ab437a781d1e GIT binary patch literal 6148 zcmeHKyH3ME5S&XQWI>aX@=7YCP|(nr$Q0E10h9z0kc}e|Buf7bJzqe>cOjU)-Jm!z zqC*JnN_(@nFWV#e9st7laXtcu05Ymz5TirH-5Kgx@*Xjy9#1&N0xMJ~I~x5(m%RHv zZgGz}uCej{mt{Shmi3fzA?J*G^pS)X(8C=bwsKzRKiSSHZ$^_@T`g0U4ym@Pi^BS6 ztJCM#_x{`Yx^Gp_zl|*yJN-6VyXg!#1I~am;0*l80QYQ>>_E{+XTTY72EG`O^&wIP zbHhe4Egc-v6@WOPI|*$$E=x@`%nchwMkql`iCP-$iV?J&{%Co*VWX(!2zL1h_T=^D zC8Vdbe@y8JxuTEGfHTl$ps&-R?Ee@1WjZhU?Gm3k1J1xdV;~HQNipU}+1|SId9v3= u>J?Q)@)|KHv|EP&PGlW9OhJuDv6+_}Hj2_k{HdJi2Z2P056-|ZFz^YFr9CA8 literal 0 HcmV?d00001 diff --git a/week-9/stopwatch/index.html b/week-9/stopwatch/index.html new file mode 100644 index 0000000..33661f3 --- /dev/null +++ b/week-9/stopwatch/index.html @@ -0,0 +1,28 @@ + + + + + + + Stopwatch + + + +

+

+ + + + \ No newline at end of file diff --git a/week-9/stopwatch/js/main.js b/week-9/stopwatch/js/main.js new file mode 100644 index 0000000..9b648b7 --- /dev/null +++ b/week-9/stopwatch/js/main.js @@ -0,0 +1,53 @@ + // Define a counter variable for the number of seconds and set it to zero. + let secondCount = 0; + // Define a global to store the interval when it is active. + let stopWatch; + // Store a reference to the display paragraph in a variable + const displayPara = document.querySelector('.clock'); + + // Function to calculate the current hours, minutes, and seconds, and display the count + function displayCount() { + // Calculate current hours, minutes, and seconds + let hours = Math.floor(secondCount/3600); + let minutes = Math.floor((secondCount % 3600)/60); + let seconds = Math.floor(secondCount % 60) + + // Display a leading zero if the values are less than ten + let displayHours = (hours < 10) ? '0' + hours : hours; + let displayMinutes = (minutes < 10) ? '0' + minutes : minutes; + let displaySeconds = (seconds < 10) ? '0' + seconds : seconds; + + // Write the current stopwatch display time into the display paragraph + displayPara.textContent = displayHours + ':' + displayMinutes + ':' + displaySeconds; + + // Increment the second counter by one + secondCount++; + } + + // Store references to the buttons in constants + const startBtn = document.querySelector('.start'); + const stopBtn = document.querySelector('.stop'); + const resetBtn = document.querySelector('.reset'); + + // When the start button is pressed, start running displayCount() once per second using setInterval() + startBtn.addEventListener('click', () => { + stopWatch = setInterval(displayCount, 1000); + startBtn.disabled = true; + }); + + // When the stop button is pressed, clear the interval to stop the count. + stopBtn.addEventListener('click', () => { + clearInterval(stopWatch); + startBtn.disabled = false; + }); + + // When the reset button is pressed, set the counter back to zero, then immediately update the display + resetBtn.addEventListener('click', () => { + clearInterval(stopWatch); + startBtn.disabled = false; + secondCount = 0; + displayCount(); + }); + + // Run displayCount() once as soon as the page loads so the clock is displayed + displayCount(); \ No newline at end of file diff --git a/week-9/working-web-form/.DS_Store b/week-9/working-web-form/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..bb40e5422b6d329ca2b2d4badb0e91f59f5f0048 GIT binary patch literal 6148 zcmeHKy-LJD5S}ro1Z}RgOeqM$)i&{nh4sC_afx_BVh&EhGL`S*b6EIJHu}wvns}$B zpv=JTH@mYl+5I3pJ4D3OyJ|u-CZZHgkVV-dGQHKbB;4N+*?U4I zt!aHx5BC2E%kis<9>rJHSCd)UHmlz8+|sl~;pb21yU!0V$BsLsN{y)dBw6(||y2L0L2nPNc13W5b#T19~+`4f* z$+a2U98E;lb)rC^Ybpk6D#k$WkwZ0_Jrf=F+_5v1C^E0^z<3BKA<+c`zres7{60RS literal 0 HcmV?d00001 diff --git a/week-9/working-web-form/css/form.css b/week-9/working-web-form/css/form.css new file mode 100644 index 0000000..8b276fd --- /dev/null +++ b/week-9/working-web-form/css/form.css @@ -0,0 +1,74 @@ +h1 { + margin-top: 0; +} + +ul { + margin: 0; + padding: 0; + list-style: none; +} + +form { + margin: 0 auto; + width: 350px; + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; +} + +div+div { + margin-top: 1em; +} + +label span { + display: inline-block; + width: 80px; + text-align: left; +} + +input, textarea { + font: 1em sans-serif; + width: 250px; + box-sizing: border-box; + border: 1px solid #999; +} + +input[type=checkbox], input[type=radio] { + width: auto; + border: none; +} + +input:focus, textarea:focus { + border-color: #000; +} + +textarea { + vertical-align: top; + height: 5em; + resize: vertical; +} + +fieldset { + width: 250px; + box-sizing: border-box; + margin-left: 136px; + border: 1px solid #999; +} + +button { + margin: 20px 0 0 124px; +} + +label { + position: relative; +} + +label em { + position: absolute; + right: 5px; + top: 20px; +} +#warning { + text-align: center; + color:rgb(190, 0, 0); +} \ No newline at end of file diff --git a/week-9/working-web-form/index.html b/week-9/working-web-form/index.html new file mode 100644 index 0000000..6a6d348 --- /dev/null +++ b/week-9/working-web-form/index.html @@ -0,0 +1,39 @@ + + + + + + + Web Form That Works + + + + +

+

Web form that works!

+

*Fill in all fields

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+ +

+ + +
+ + + + \ No newline at end of file diff --git a/week-9/working-web-form/js/main.js b/week-9/working-web-form/js/main.js new file mode 100644 index 0000000..bfa1e75 --- /dev/null +++ b/week-9/working-web-form/js/main.js @@ -0,0 +1,48 @@ +let form = document.querySelector("form"); +let namee = document.getElementById("name"); +let mail = document.getElementById("mail"); +let subject = document.getElementById("subject"); +let message = document.getElementById("message"); + +let warning = document.querySelector("#warning"); + +/*let allValues = [ + namee.value === "", + mail.value === "", + subject.value === "", + message.value === "" +];*/ + +form.addEventListener("submit", function (event) { + if ((namee.value === "" || mail.value === "") && (subject.value === "" || message.value === "")){ + event.preventDefault(); + warning.innerHTML = "You must fill in ALL fields!" ; + namee.style.borderColor = "red"; + mail.style.borderColor = "red"; + subject.style.borderColor = "red"; + message.style.borderColor = "red"; + } +else if (namee.value === "") { + event.preventDefault(); + warning.innerHTML = "You must fill in the NAME field!" ; + //form.style.borderColor = "red"; + namee.style.borderColor = "red"; + } else if (mail.value === "") { + event.preventDefault(); + warning.innerHTML = "You must fill in the EMAIL field!"; + //form.style.borderColor = "red"; + mail.style.borderColor = "red"; + } else if (subject.value === "") { + event.preventDefault(); + warning.innerHTML = "You must fill in the SUBJECT field!"; + //form.style.borderColor = "red"; + subject.style.borderColor = "red"; + } else if (message.value === "") { + event.preventDefault(); + warning.innerHTML = "You must fill in the MESSAGE field!"; + //form.style.borderColor = "red"; + message.style.borderColor = "red"; + } +}); + +/*Adding FormSpree API*/