diff --git a/README.md b/README.md index cdd7cce..499d51a 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # Art of memory Art of memory is a classic game for one player. The game contains 8 pairs and start with the front up side down. The user select two cards- if they match- two new cards can be selected. The game count moves and time so the user can compete against himself. +The site is responsive across all screen sizes. ![Site view across devices](assets/images/readme/memoryfirsttimg.webp) @@ -12,6 +13,7 @@ Art of memory is a classic game for one player. The game contains 8 pairs and st + [Current User Goals](#current-user-goals "Current User Goals") + [New User Goals](#new-user-goals "New User Goals") + [Design](#design "Design") + +[Wireframes](#wireframes "wireframes") + [Colour Scheme](#colour-scheme "Colour Scheme") + [Typography](#typography "Typography") + [Imagery](#imagery "Imagery") @@ -31,17 +33,21 @@ Art of memory is a classic game for one player. The game contains 8 pairs and st ## UX ### Site Purpose: -Welcome to Art of memory. This game is made as a student project at Code Institue´s education "Fullstack developer". The project includes the languages JavaScript, HTML and CSS. I hope the user find the game challenging and relaxing. The art are made by myself and while working with the project I realized that this kind of game is saleable to artists and photographers who wish to integrate -During the process I have realized that this type of game can be useful for artists and photgraphers to increase the value on their websites instead of just having a clean sales. Anyway, MY purpose of the page is to exercise the user's memory in a playful and colorful way. +Welcome to Art of memory. This is my second project as a student at Code Institute to "Full Stack Software Development-diploma". The project includes the languages JavaScript, HTML and CSS. +The art are made by myself and while working with the project I realized that this kind of game is saleable to artists and photographers who want to increase the value on their websites instead of just having a clean webshop. +Anyway, MY purpose of the this page is to challenge the user´s memory in a playful and colorful way. + +The site is responsive across all screen sizes. ### Site Goal: -I have used my skills that I have learned when studying JavaScript into a simple and fun game. The goal is to engage both new user and +I have used my skills in JavaScript, CSS and HTML and created a simple and fun game. +The goal is to engage user so they return to the site. ### Audience: -The artworks can be changes to +The audience can be all ages. My kids, 13 and 15 years old found it fun and challengeing as a contrast to today's fast games with lots of graphics and high tempo. The artwork can be changed to fit to suit specific target groups. ### Communication: -The game has a big button to start the game. If the user want to quit before all cards are matched the gameboard has a big stop-buttom. You come to the welcomepage. +The game has a big button to start the game. If the user want to quit before all cards are matched the gameboard has a stop-buttom then you arrive to the welcomepage. ### Current User Goals: ### New User Goals: @@ -53,59 +59,62 @@ The game has a big button to start the game. If the user want to quit before all ### Wireframes: -Wireframe over welcomepage: +Wireframes are made start to help me with the layout of the welcomescreen and gamearea. +I also made a overwiew "mindmap" over the javascript functions so I know what step I have to take to get a functional game. That mindmap is also attatched in below. + + +Wireframe:welcomepage: ![Wireframe welcome page](assets/images/readme/wireframewp.webp) -Wireframe over gamepage: +Wirefram:gamepage: ![Wireframe gamepage](assets/images/readme/wireframegp.webp) Mindmap over JS-happenings on gamepage: ![Wireframe gamepage](assets/images/readme/mindmap.webp) + + ### Colour Scheme: Since the artworks are filled with colors, I wanted a soft and sober style of the page. -#454D61 -#567799 -#7A9DB5 -#AABCB +So I chooced four tones of blue: #454D61, #567799, #7A9DB5, #AABCB which match the artworks. ![Colour Palette](assets/images/readme/colourscheme.webp) ### Typography: The fonts are picked from Google Fonts library. -1. BEBAS NEUE - This is the main heading font, and it resembles the universe. It felt fitting to the design. -2. Montserratr the tagline. I wanted it to be easy to read. -3. Brittany - In the word: ART in the logotype.This font is picked from Canva.com -I choosed theese fonts becase the are matching toghether. +1. BEBAS NEUE - Is in the heading and in the logotype. +2. Montserrat . Is in the written text in in rule-popup +3. Brittany - In the word: ART in the logotype. +I choosed theese fonts becase they looks nice together. ### Imagery: -All artworks are created by me and have been photographed in a studio. -The images are modified and made as wedp.format in photoshop. +All artworks are created by me and have been photographed in a studio and processed in photshop. +All images converted to wedp.format in photoshop +The favicon is also made in photoshop- in three different sizes. ## Features ### Existing Features: - +The page contains a welcomepage with a start button. When you click on the button you will be directed to the gamearea with 16 cards, a button for rules and a button for stopping the game. #### Landing Page: ![Landing Page] #### Page Title: -![Page Heading & Tagline] +![Logotype: Art of memory](assets/images/memlogotype.webp) +The titel of the page is Art of memory that name is also included in the logotype of the page. +Under the logotype I have wrote: Art & game created by Camilla Dahlström. #### Instructions Panel: -![Instruction: how to play](assets/images/rules.webp) - +Simple rules is displayed in a popup-windows: +"Rules +Find 8 matching pairs by choosing two cards on the board. +If they match- choose two new cards. +You win when you find all 8 pairs. +Good luck!" #### Game Area: -![Game screen & toggle switches] - -#### Win Screen: -![Win Screen] - -#### Lose Screen: -![Lose Screen] +![Welcomepage, win screen and gamearea](assets/images/readme/gamearea.png) #### Social Links: -![Social Links] - +Under the logtype I have added icons to github and my emailadress. ### Features Left to Implement @@ -129,26 +138,39 @@ The images are modified and made as wedp.format in photoshop. ![Accessibility score](assets/images/images-readme/lighthouse-score.png) - - ### Unfixed Bugs ## Technologies Used + ### Main Languages Used - HTML5 -- CSS3 +- CSS - Javascript ### Frameworks, Libraries & Programs Used -- Google Fonts - -- Font Awesome - -- GitPod - +- Google Fonts - Both fonts were chosen via Google Fonts +- Font Awesome - for the social links icons +- GitPod - Integrated Development Environment (IDE) used to build the site - GitHub - to store my repository for submission. -- Am I Responsive? - to ensure the project looked good across all devices. -- Adobe photoshop - to create the interactive artwork. +- Am I Responsive? - To ensure the project looked good across all devices. +- Adobe photoshop - to create the wedp-files artwork. +- Canva.com - to create Wireframes and logotype +- Chrome DevTools - to inspect the website +- Lighthouse - used to assess the overall quality of the site. +- W3C Markup Validation site - used to find issues in the html for the site and to resolve them +- W3C CSS Validation site - used to find issues in the CSS for the site and to resolve them. +- JS Hint validation site - used to find issues in the JavaScript for the site and to resolve them. +- Am I Responsive? site - Generate screenshots of the site across different devices and screen sizes. + ## Deployment +The site is created in Gitpod with a template from CodeInstitute. + +The regular commits and pushes were sent from GitPod back to the repo on GitHub. +In the GitHub repository, navigate to the Settings tab +From the source section drop-down menu, select the Main Branch +Once the main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment. ## Credits ### Content diff --git a/assets/css/style.css b/assets/css/style.css index b084803..bc3bae9 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -377,6 +377,7 @@ button#stop { img.image { height: 100px; width: 100px; + alt: "Front card of memory. Artwork from Camilla Dahlström"; } .card-container { @@ -393,8 +394,10 @@ button#stop { .card-before { background: url("../images/memfront.webp"); + alt: "Front card of memory. Artwork from Camilla Dahlström"; background-size: 100%; + } } } \ No newline at end of file diff --git a/assets/images/readme/gamearea.png b/assets/images/readme/gamearea.png new file mode 100644 index 0000000..967b920 Binary files /dev/null and b/assets/images/readme/gamearea.png differ diff --git a/assets/js/script.js b/assets/js/script.js index add9e4d..4989f86 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -22,7 +22,8 @@ document.addEventListener("DOMContentLoaded", function () { /*Array for cards:*/ const items = [{ name: "Memo1", - image: "assets/images/mem1.webp" + image: "assets/images/mem1.webp", + }, { name: "Memo2",