Skip to main content

Coding Basics Capstone Project

  I probably won't ever build anything else (just try and break what someone else made 😉)


I really enjoyed the basics of coding course I took through Devmountain.  I found the HTML to be intuitive, the CSS to be loads of fun, and the JavaScript to be mind-bending.

My Silly Little Webpage  ðŸ‘ˆ Link to see what I made


HTML:

<header>

  <div class="logo-header">

    <h2 class="different">And Now For Something

      <br />Completely Different

    </h2>

    <img class="logo" src="https://i0.wp.com/www.adtothebone.com/blogpix/obliteratingfoot62470.jpg?w=625" alt="Monty Python Foot" width=325px />

  </div>


  <nav class="navigation">

    <a class="navi">SPAM SPAM SPAM SPAM</a>

    <a class="navi">The Spanish Inquisition</a>

    <a class="navi">The Holey Grail</a>

    <a class="navi">Lumberjack

      <br />(Not a barber)</a>

    <a class="navi">Bwian

      <br /> (Not the messiah)</a>

    <a class="navi">Crunchy Frog</a>

    <a class="navi">Dead Parrot</a>

    <a class="navi">Biggles</a>

  </nav>


  <section class="newsletter-box">

    <div class="newsletter-signup">

      <h2>Sign up for Spam</h2>

      <input type="text" placeholder="Your Email Address">

      <button id="submit">Subscribe</button>

    </div>

  </section>

</header>

<main>

  <div class="collection">

    <p>Your Collection:</p>

    <h5>0</h5>

  </div>

  <section class="card-section">

    <div class="item-card">

      <img src="https://preview.redd.it/the-spanish-inquisition-wins-the-monty-pythons-flying-v0-g7uiofc376ba1.png?width=854&format=png&auto=webp&s=69998e6046e2af52da55fd4aec957d8b59a88496" alt="Nobody expects the Spanish Inquisition!" class="item-pic" />

      <h3>The Spanish Inquisition</h3>

      <button id="item-name-btn" class="clickBtn">Add to Wishlist</button>

    </div>


    <div class="item-card">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRj1g9ZFt0w1wu1nNJ-uVE1MH4_fU8LX4AR1w&s" alt="'E's passed on! This parrot is no more! He has ceased to be! 'E's expired and gone to meet 'is maker!" class="item-pic" />

      <h3>Dead Parrot</h3>

      <button id="item-name-btn" class="clickBtn1">Add to Wishlist</button>

    </div>


    <div class="item-card">

      <img src="https://i1.sndcdn.com/artworks-000011770872-zh8jx2-t500x500.jpg" alt="Spam spam spam spam spam" class="item-pic" />

      <h3>Spamity Spam!</h3>

      <button id="item-name-btn" class="clickBtn2">Add to Wishlist</button>

    </div>


    <div class="item-card">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThEJ_lrSk22xseV1NslF7SqXPx9TAzvmul7g&s" alt="The HOLEY GRAIL ...I told them we already got one heh heh heh.." class="item-pic" />

      <h3>The Holy Grail</h3>

      <button id="item-name-btn" class="clickBtn3">Add to Wishlist</button>

    </div>


    <div class="item-card">

      <img src="https://www.theolivepress.es/wp-content/uploads/2014/07/belinda-monty-python.jpg" alt="He's a lumberjack and he's OK!" class="item-pic" />

      <h3>Barber, err, Lumberjack</h3>

      <button id="item-name-btn" class="clickBtn4">Add to Wishlist</button>

    </div>


    <div class="item-card">

      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUi4yLAkjuelazYMVpvKELfs6QeOqeQ0Xoqqx8pF9Xo2F4hrC56q8iofD-k2EevGkbXshbrvyWdKqKrOjNpm82Vs1NY7AT4uOxOMoPVlfQ3QzAts3yfj_rzr0wrQjKkuGbeNXIPmESfgV-/s1600/and+now.jpg" alt="And now for something completely different..." class="item-pic" />

      <h3>And Now For Something Completely Different</h3>

      <button id="item-name-btn" class="clickBtn5">Add to Wishlist</button>

    </div>


    <div class="item-card">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXVfo2GYvAhOV_KNQ_Brx3X3gcxDYDuR8Dug&s" alt="He's not the messiah, he's just a very naughty boy!" class="item-pic" />

      <h3>A Very Naughty Boy</h3>

      <button id="item-name-btn" class="clickBtn6">Add to Wishlist</button>

    </div>


    <div class="item-card">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU29RYvnQthFHbm2xkjbV0QCYkYGaWws7Ppw&s" alt="Dew picked and lightly killed chocolate covered crunchy frog" class="item-pic" />

      <h3>Crunchy Frog</h3>

      <button id="item-name-btn" class="clickBtn7">Add to Wishlist</button>

    </div>

  </section>

</main>


<footer>

  <p>&#0153 There are some who call me...Tim?</p>

  <img class="tim" alt="Pic of...Tim?" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRw2_aCMvpCbGewmXRu1vvKvqTDtq3XpDAhog&s" </footer>


CSS:

* {

  margin: 0;

}


main {

  margin: 0 0 0 290px;

  padding: 60px;

  height: 1200px;

  background-color: #ccb99f;

}


header {

  height: 1300px;

  width: 250px;

  padding: 20px;

  position: absolute;

  background-color: #9a4c4c;

  font-family: "Sigmar One";

  color: #04140c;

  box-shadow: 2px 2px 2px black;

}


.different {

  padding-bottom: 40px;

  transition: 2s;

}


.different:active {

  transform: rotate(120deg) scale(1.2, 1.2);

}


.logo-header {

  align-items: center;

  color: #162227;

  text-align: center;

}


h2:hover {

  cursor: pointer;

  color: #db8a6e;

  transform: scale(0.8);

}


.logo {

  padding: 10px 0;

  width: 80%;

  border-radius: 10%;

  box-shadow: 8px 5px 5px black;

  transition: 1.5s;

}


.logo:hover {

  transform: scale(1.3, 1.3);

}

/* //I want the foot to go to the bottom of the page when clicked// */

.logo:active {

}


.navigation {

  display: flex;

  flex-direction: column;

  text-align: center;

  padding-top: 40px;

}


.navi {

  font-family: "Sigmar One";

  color: #04140c;

  padding-top: 10px;

}


.navi:hover {

  color: #e95f4d;

  cursor: pointer;

}


.newsletter-box {

  position: absolute;

  top: 1150px;

}


.card-section {

  display: flex;

  flex-wrap: wrap;

}

.collection:hover {

  transform: scale(1.2, 1.2);

}

.collection {

  width: 80px;

  height: 80px;

  padding: 10px;

  background-color: #9a4c4c;

  color: #04140c;

  position: fixed;

  font-family: "Libre Baskerville";

  font-size: 13px;

  top: 10px;

  right: 10px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  border-radius: 25%;

  text-align: center;

  box-shadow: 6px 2px 2px black;

  transition: 1.5s;

}


.item-card {

  margin: 10px;

  background-color: #9a4c4c;

  height: 300px;

  width: 175px;

  color: #04140c;

  border-radius: 10px;

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  align-items: center;

  text-align: center;

  box-shadow: 6px 2px 2px black;

}


.item-pic {

  height: 130px;

  width: 130px;

  object-fit: cover;

  border-radius: 10px;

  box-shadow: 8px 5px 5px black;

}


a {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}


a:active {

  transform: translate(3px, 3px);

}


button {

  height: 50px;

  width: 80px;

  font-family: cursive;

  border: none;

  padding: 5px 10px;

  border-radius: 10px;

  background-color: #f37748;

  color: white;

  box-shadow: 6px 2px 2px black;

}


button:hover {

  background-color: #6c4a41;

  color: #04140c;

}


button:active {

  transform: translate(2px, 3px);

}


h3 {

  font-family: "Libre Baskerville";

  font-size: 12px;

}


h3:hover {

  cursor: pointer;

  color: #e95f4d;

  transform: scale(0.8);

}


footer {

  position: fixed;

  bottom: 0;

  background-color: #6c4a41;

  color: #db8a6e;

  height: 55px;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}


.tim {

  padding: 5px 10px;

  width: 70px;

  height: 45px;

  border-radius: 20%;

  box-shadow: 2px 2px 2px black;

}


JavaScript:
//counter logic

var count = 0;
var cart = document.querySelector("h5");

function changeNum() {
  cart.textcontent = count;
}

function increaseCount() {
  count++;
  if (count === 0) {
    cart.textContent = "0";
  } else {
    cart.textContent = count;
  }
}

//button logic
var button = document.querySelector(".clickBtn");
button.addEventListener("click", increaseCount);

var button1 = document.querySelector(".clickBtn1");
button1.addEventListener("click", increaseCount);

var button2 = document.querySelector(".clickBtn2");
button2.addEventListener("click", increaseCount);

var button3 = document.querySelector(".clickBtn3");
button3.addEventListener("click", increaseCount);

var button4 = document.querySelector(".clickBtn4");
button4.addEventListener("click", increaseCount);

var button5 = document.querySelector(".clickBtn5");
button5.addEventListener("click", increaseCount);

var button6 = document.querySelector(".clickBtn6");
button6.addEventListener("click", increaseCount);

var button7 = document.querySelector(".clickBtn7");
button7.addEventListener("click", increaseCount);

//email logic

var newsletterBox = document.querySelector(".newsletter-signup");
var emailInput = document.querySelector("input");
var subscribeBtn = document.querySelector("#submit");
var bottomLeft = document.querySelector(".newsletter-box");

function submitEmailHandler() {
  var confirmationMsg = document.createElement("p");
  if (emailInput.value.length > 0) {
    confirmationMsg.textContent = "Spamity spam for " + emailInput.value;
    newsletterBox.remove();
    bottomLeft.appendChild(confirmationMsg);
  } else {
    alert("No. 1 The Larch");
  }
}

subscribeBtn.addEventListener("click", submitEmailHandler);



Comments

Post a Comment

Popular posts from this blog

Allow Me To Introduce Myself

Hello and good morning!   My name is Adriana K Williams, and I am embarking on a grand new journey. A little about Me: I am Toltec, my motto is Life is Art. I did not follow a traditional career path. Throughout my upbringing, I kept hearing adults say that if you do what you love, you'll never work a day in your life. If circumstances had been different, I would have gone to university. I would have loved to spend a few years studying philosophy, art, history, and science. However, I couldn't justify the cost of this experience since I wasn't focused on a specific career after graduation; I simply wanted to explore and learn because I love learning. So, I started working in restaurants because of my passion for food, and later became a roadie selling merchandise for touring bands across North America. I worked tirelessly at these jobs, but I genuinely loved what I did. I was fortunate to attend a show almost every night for a month or two at a time while on tour, meet peop...
Post a Comment
Read more

Solo Capstone Project for Devmountain QRPT14

  Link to slide show: Slideshow Adriana K Williams Solo Capstone Project  The website I tested: https://www.powwows.com/ My Favorite Test Case Find a PowWow Near You Search Without Entering Any Information I really enjoy negative testing.  I like to ask the question, ‘Will this allow me to _____?’ and then check to see whether the application behaves as anticipated, or if there might be a hidden vulnerability that could allow me to bypass the expected flow. My Favorite Bugs I found my favorite bug while testing the first feature during my initial exploratory testing.  If you try to search for a Pow Wow by Month, Year, and State or Province from the home page you’ll find you’re unable to select the year 2024.  My second favorite bug goes along with this one.  If you click the PowWows.com icon that is supposed to take you home from the calendar page you aren’t brought back to the homepage, but to a Pow Wow Calendar instead. My Least Favorite Par...
Post a Comment
Read more