For my Interactive Development assignment, I've decided to incorporate all html, css and JavaScript skills into creating / building a website for a fictional book company -Titled Wyhcz Books. It is mainly for customers / target audiences to view the different variety of books available before making their way towards our physical store. This allows them to read up on the different book genres, synopsis and authors of the specific book. Online purchases however will not be possible as the website is not integrated with a database server to compile the Books & User Data.
- Week 3-4: Design the Format Base for the website
- Week 5: Assignment Checkpoint with Wireframe & Project Idea
- Week 6-7: Finalise the design format, add in Book's details & Pictures
Since Microsoft windows scaling default is at 100%, some laptops with smaller screens scales like 125% or 150% may have some issues viewing my website. My current assignment website scales with default windows scaling of 100%. In order to view my website with original scale, please use one of the two methods below.
Method 1
- please set / change your display : Right-Click Desktop > Select Display settings > Set Scale & Layout to 100% & Display resolution to 1920 x 1080. Please also ensure that your browser zoom is at 100%.
OR
Method 2
- Windows scaling at 125%, you can view the website's original scale by making your browser's zoom to 80%.
- Windows scaling at 150%, you can view the website's original scale by making your brower's zoom to 67%.
- Windows scaling at 175%, you can view the website's original scale by making your brower's zoom to 50%.
For Mobile Responsive view, the below devices are available.
- Iphone 6/7/8 & 6-Plus / 7-Plus / 8-Plus
- Iphone SE, Iphone X, Iphone XR, Iphone 12 Pro
- Samsung Galaxy A5/71, S8+, S9+, S20 Ultra
- Google Pixel 5
- Home page
- Home page header
- Welcome message will be slowly revealed to user using typewriter
- Webpage banner image added beneath the welcome message
- Books will be shown in horizontal rows
- Information page
- Information header
- paragraph about information
- Contact page
- Contact header
- paragraph about contact
- Redeem page
- Redeem header
- Web form on redeeming books
- Submit button checks if all textboxes & fields are filled
- Cancel button that clears all previous edits in form
- Book Information
- There are 4 types of books available
- Fiction Books
- Educational Books
- Manga Books
- Comic Books
- There are 4 types of books available
- Footer
- Navigational links to different html pages
- Mail to & Tel to different contact information
- Textbox to allow email input to submit for subscription
-
Webpage will be adapting slightly towards the Dark Theme format
- A mix of both Black & Blue colour theme
- Added a colour relative wallpaper
- Words & Fonts will either be Black or White
- Gives the user an experience of depth & deep feeling, books has alot of offer such as deep story plots, character development & story lore
-
Types of books such as Fiction, Educational, Manga and Comic
- Each individual type of book will be Padded with different pastel colour-background
- Fiction -Pastel colour Light Blue
- Educational -Pastel colour Light Red
- Manga -Pastel colour Beige
- Comic -Pastel colour Dark-Golden-Yellow
- Each individual type of book will be Padded with different pastel colour-background
Responsive Interactions / Website Testing
- Welcome message will be revealed slowly to user via TypeWriter
- Books will resize according to screen ratio, and change to veritical columns for mobile view
- Page links on top of webpage will be hidden inside an ellipsis with JavaScipt
- Ellipsis button shows navigational links upon clicking
- Footer contains navigational page links as well as links to GitHub Repo, Fax & Tel number, and email addresses
Technologies / Language Implemented
- HTML
- Contain all the text, navigational link, book details, web form
- Clicking on the logo image on all pages brings the user to home page
- CSS
- Format of website, border / padding / colour for individual elements
- Media Responsive interactions
- JavaScript
- Ellipsis Menu for navigational page links when the screen size is small like mobile devices
- Notification popup message if footer textbox is filled and submit button is pressed
- Notification popup message if redeem form text, number and email box is filled while submit button is pressed
- Clears form when submit button is pressed
Content / Media Images & Descriptions
- All the book cover page images were taken from Google and Amazon books
- Book synopsis & genre is taken from both Amazon books & GoodReads Website
- Amazon Link : https://www.amazon.com/Books/s?srs=17143709011&rh=n%3A283155
- GoodReads Link : https://www.goodreads.com/
- Website background image is from WallpaperAcces
- WallPaperAccess Link : https://wallpaperaccess.com/blue-mountain
Acknowledgements / Sources of Inspiration
- Tips and Tricks on screen responsive reactions were sourced from
- W3Schools - Link : https://www.w3schools.com/html/html_responsive.asp
- FreeCodeCamp, it shows different website scales and teaches how to make them responsive using different methods
- Link : https://www.youtube.com/watch?v=srvUrASNj0s&t=13722s&ab_channel=freeCodeCamp.org
- Format
- Books border, background, padding, flex, footer and web form sourced from previous weekly ID_CAs
- Ellipsis Button
- W3Schools - Link : https://www.w3schools.com/howto/howto_css_menu_icon.asp
- Popup notification
- W3schools - Link : https://www.w3schools.com/howto/howto_js_popup.asp
- Custom Scrollbar
- W3schools - Link : https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
- TypeWriter Effect
- CSS-TRICKS - Link : https://css-tricks.com/snippets/css/typewriter-effect/
- Clearing form
- Boddyhad-Tricks - Link : https://bobbyhadz.com/blog/javascript-clear-input-field-after-submit