Level UP

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Build a Gameified Progression tracker full stack Application using the MERN stack

Screenshot

Links

• Solution URL: https://github.com/chopsquad/Dicee-Challenge
• Live Site URL: https://chopsquad.github.io/Dicee-Challenge/

My process

• Create an external javascript file
• Add Dice images
• Create a random number
  • 
• Change the <img> to a random dice
  • 
• Change both image elements
  • 
• Change the title so it displays a winner
  • 

Built with

• HTML
• CSS
• MongoDB
• Express
• React
• Node
• Javascript

What I learned

-How to add an external js file into HTML:

<script src="URL"></script>

-If you want to have the external JS file to be run at the end then we add defer to the script:

<script src="URL" defer></script>
<!-- A script tag with defer waits until the entire parser is done and then runs all scripts marked with defer in the order they are encountered. -->

-How to add an external image to html

<img
  src="URL of external image"
  alt="something you would say when reading the page t someone over the phone"
/>

-the alt attribute provides alternate text to display when an image is not loaded. It also used to support accessibility.

-How to get a random number between two integer while also including those integers.

Math.floor(Math.random() * (max - min + 1) + min);
//The maximum is inclusive and the minimum is inclusive
// math.floor rounds down towards negative infinity
// math.ceil rounds up towards positive infinity

• How to set the attribute using dom manipulation

//first we using a querySelector to select what we want to change and set it into a variable
let variable = document.querySelector('What we want to select');
//using the manipulation attributes we can make the changes happen
variable.setAttribute(name, value);
// the name is the name of the attribute whose value is it be changed
// the value is what we will changing to.

Continued development

• [ ]Add functions for code that is being repeated.

Useful resources

• Resource 1 - This helped me get a better understanding of when and where scripts should be used and how high or low they are in loading priority.
• Resource 2 - Documentation on the use of alt text and the benefits of using it to help with accessibility.
• Resource 3 - To get a better understanding when to use math. functions.
• Resource 4 - Using setAttribute and the documentation behind it.
• The Markdown Guide important information on how to markdown.

Author

• Website - Vardan Vanyan
• GitHub - chopsquad