You can see on RickAndMortyAPI
- Showing 6 random characters from the serie with they description avery time you refresh the page.
- Do it with JavaScript, HTML and CSS (Complemented with SASS)
- After clone run
npm install --save
to download all dependencies - The folders are distributed in
- index.html main file,
- img/ folder with icons (github and "Rick and Morty")
- js/ folder with JavaScript
- utils/ folder with functions
- function.js has the functions to show all description when you click on some character
- randomArray.js set a random array to after get the characters
- setCharacter.js using random array get the characters setting all the settings
- index.js main file,. Is not important, only has the description random image
- utils/ folder with functions
- css/ folder with css files, only has one but i edit only the files in SASS folder
- styles.css
- sass/ folder with all styles
-
extends.css classes to then @extend on styles.css
-
mix.css functions to use with @include on styles.css
-
utils.css some classes that help and set differents styles
-
variables.css Variables with diferents values to not repeat or make mistakes
-
styles.css Here import the other files to use them
@import "./variables.scss"; @import "./utils.scss"; @import "./mix.scss"; @import "./extends.scss";
-
if you edit some SASS' file, run this command in root folder
sass --watch sass/styles.scss css/styles.css
This command will compile your scss code and put into styles.css