Day 06 - 02

scrimba/proj/css/password-gen.css

@@ -0,0 +1,220 @@
+/* ---------------------- */
+/* Fonts                  */
+/* ---------------------- */
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Karla:wght@800&display=swap");
+
+/* ---------------------- */
+/* Custom properties      */
+/* ---------------------- */
+
+:root {
+  --clr-bright-green: #55f991;
+  --clr-dark-green: #10b981;
+
+  --clr-very-dark-blue: #1f2937;
+  --clr-dark-blue: #273549;
+  --clr-medium-grey: #d5d4d8;
+
+  --ff-main: "Karla", sans-serif;
+  --ff-serif: "Inter", sans-serif;
+}
+
+/* ---------------------- */
+/* Reset                  */
+/* ---------------------- */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+img {
+  display: block;
+  width: 100%;
+}
+
+/* ---------------------- */
+/* Typography             */
+/* ---------------------- */
+
+body {
+  font-family: var(--ff-serif);
+  color: #fff;
+  background-color: #1c1c1c;
+}
+
+h1 {
+  font-family: var(--ff-main);
+  font-weight: 800;
+  margin: 0.25em 0;
+}
+
+h2 {
+  color: var(--clr-medium-grey);
+  font-size: 1.1em;
+  font-weight: 400;
+  margin-bottom: 1em;
+}
+
+hr {
+  background-color: var(--clr-dark-blue);
+  color: var(--clr-dark-blue);
+  height: 2px;
+  border: none;
+}
+
+footer {
+  padding: 2em;
+}
+
+/* ---------------------- */
+/* Buttons                */
+/* ---------------------- */
+
+.btn {
+  font-size: 0.95em;
+  font-weight: 500;
+  font-family: var(--ff-serif);
+  background-color: var(--clr-dark-green);
+  color: #fff;
+  border: none;
+  padding: 0.5em 1em;
+  border-radius: 0.25em;
+  margin: 2em 0;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
+    0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
+    0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
+  transition: all 250ms;
+}
+
+.btn:hover,
+.btn:focus {
+  background-color: #fff;
+  color: var(--clr-dark-green);
+  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.09), 0 4px 2px rgba(0, 0, 0, 0.09),
+    0 8px 4px rgba(0, 0, 0, 0.09), 0 16px 8px rgba(0, 0, 0, 0.09),
+    0 32px 16px rgba(0, 0, 0, 0.09);
+}
+
+/* ---------------------- */
+/* Utility classes        */
+/* ---------------------- */
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ---------------------- */
+/* Components             */
+/* ---------------------- */
+
+main {
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+.container {
+  width: min(90%, 33rem);
+  padding: 2em;
+  background-color: var(--clr-very-dark-blue);
+  border-radius: 0.25em;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
+    0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
+    0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
+}
+
+/* Slider */
+
+#password-slider-text {
+  font-size: 0.95em;
+  color: var(--clr-medium-grey);
+}
+
+#sliderNumber {
+  font-family: var(--ff-main);
+  color: var(--clr-bright-green);
+}
+
+#slider {
+  display: block;
+  margin-top: 0.5em;
+}
+
+.title-green {
+  color: var(--clr-bright-green);
+}
+
+.fa-flash {
+  margin-right: 0.75em;
+}
+
+#letter-main {
+  text-transform: uppercase;
+}
+
+.downSection {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(4, 1fr);
+  gap: 1em;
+  margin-top: 1em;
+}
+
+.generatedPassword {
+  background-color: var(--clr-dark-blue);
+  text-align: center;
+  padding: 0.5em 1em;
+  border-radius: 0.25em;
+}
+
+input {
+  color: var(--clr-bright-green);
+  background-color: var(--clr-dark-blue);
+  border: none;
+  text-align: center;
+  padding: 0;
+  font-size: 1rem;
+  max-width: 15ch;
+}
+
+input[type="text"] {
+  cursor: pointer;
+}
+
+.fa-ellipsis-h {
+  color: var(--clr-very-dark-blue);
+}
+
+/* footer */
+
+.attribution {
+  font-family: var(--ff-serif);
+  font-size: 11px;
+  text-align: center;
+}
+
+.attribution a {
+  text-decoration: none;
+  color: hsl(228, 45%, 44%);
+}
+
+/* ---------------------- */
+/* Media queries          */
+/* ---------------------- */
+
+@media (min-width: 520px) {
+  .container {
+    padding: 4em;
+  }
+
+  .downSection {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+}

scrimba/proj/js/practice2.js

@@ -68,3 +68,120 @@ for (let i = 0; i < largeCountries2.length; i++ ) {
 
 /* Practice 5 of Practice Pad 2 */
 
+
+let dayOfMonth = 13
+let weekday = "Friday"
+
+if (dayOfMonth === 13 && weekday === "Friday") {
+ console.log("🦇🫨")
+}
+
+/* Practice 6 of Practice Pad 2 */
+
+//I did this top one for fun
+
+let rock = "👊🏻"
+let paper = "✋🏻"
+let scissors = "✌🏻"
+
+function draw() {
+ let randomNum = Math.floor(Math.random() * 3) + 1
+ console.log(randomNum)
+if (randomNum === 1 ){
+ console.log(rock)
+} else if (randomNum === 2) {
+ console.log(paper)
+} else if (randomNum === 3) {
+ console.log(scissors)
+} else {
+ console.log("rps failed")
+}
+}
+
+draw()
+
+//the actual assignment:
+let hands = ["rock", "paper", "scissors"]
+
+//console.log( hands.random() )
+
+function handsies() {
+ // My pre-research guess:
+  //return hands[Math.floor(Math.random() * hands.length)]
+
+  // My post-research:
+  // hands.length is a less-static way because it adjusts with the array organically
+  let rangeOfRandom = Math.floor(Math.random() * hands.length) 
+  return hands[rangeOfRandom] 
+
+  //Instructor Per's way
+  //let randomIndex = Math.floor(Math.random() * 3)
+  //return hands[randomIndex]
+}
+
+//console.log(handsies())
+
+console.log(handsies())
+
+
+/* Practice 7 of Practice Pad 2 */
+
+let fighters = ["🦇", "👻",  "🤖", "💀", "🐉", "🐙", "🐠", "😶‍🌫️", "🤠", "🤡", "🥶", "👽", "💩"]
+let stageEl = document.getElementById("stage")
+let fightBtn = document.getElementById("fight-btn")
+
+fightBtn.addEventListener("click", function() {
+
+ let pickerA = Math.floor(Math.random() * fighters.length)
+ let pickerB = Math.floor(Math.random() * fighters.length)
+
+ //First attempt: Picks the same fighter both slots, so lets try two pickers.
+ //return fighters[picker + " vs " + picker]
+ //console.log(picker + " vs " + picker)
+
+ //Second attempt: Works! Now just have it return emojis and not the spot in the array. And have it update the hmtl.
+ //console.log(pickerA + " vs" + pickerB)
+ console.log(pickerA + " vs " + pickerB + fighters[pickerA] + " vs " + fighters[pickerB] )
+
+
+ //Third attempt: Updates html, now emoji time.
+ // use the random number as an index to fetch an emoji from the array.
+ stageEl.textContent = fighters[pickerA] + " vs " + fighters[pickerB] 
+
+
+ // Mine but clean
+/*
+ let pickerA = Math.floor(Math.random() * fighters.length)
+ let pickerB = Math.floor(Math.random() * fighters.length)
+ console.log(pickerA + " vs " + pickerB)
+ stageEl.textContent = fighters[pickerA] + " vs " + fighters[pickerB] 
+*/
+
+ // Instructor Per's
+ /*
+ let random2IndexOne = Math.floor(Math.random() * fighters.length )
+ let random2IndexTwo = Math.floor(Math.random() * fighters.length )
+ console.log(fighters[random2IndexOne] + " vs " + fighters[random2IndexTwo])
+ stageEl.textContent = fighters[random2IndexOne] + " vs " + fighters[random2IndexTwo]
+*/
+})
+
+/* Practice 8 of Practice Pad 2 */
+
+let fruit = ["🍎", "🍊",  "🍎", "🍎", "🍊"] 
+let appleShelf = document.getElementById("apple-shelf") 
+let orangeShelf = document.getElementById("orange-shelf")
+
+function sortFruit() {
+ console.log("🍎", "🍊",  "🍎", "🍎", "🍊")
+
+ for (i = 0; i < fruit.length; i++) {
+    if (fruit[i] === "🍎") {
+     appleShelf.textContent += "🍎"
+    } else if (fruit[i] === "🍊") {
+     orangeShelf.textContent += "🍊"
+    }
+}
+}
+
+sortFruit()