LinguaSonnet
Contents
Introduction
Project Brief
The aim of this project was to collaboratively build a web application, which meets the following criteria:
- Makes use of
Bootstrapand (at least) two server-side APIs. - Uses modals (rather than alerts, confirms or prompts).
- Is interactive (e.g. accepts and responds to user input).
- Makes use of client-side storage to store persistent data.
- Has a polished user interface.
Project Description
To meet the above brief, the project team conceptualised “LinguaSonnet”.
LinguaSonnet is a web application which seamlessly combines word learning with poetry, allowing users to access word definitions and examples of the word in a poem.
The Problem and Solution
Problem: Understanding the meaning of English words and how they might be used in poetry.
LinguaSonnet provides a novel solution to word learning; a one-stop-shop for users to access word definitions and examples of how the word is used in a well known poem.
User Story and Primary Audience
Story: As a student learning the English language, I want to find out the meaning of English words and examples of how the word is used in “real life” (e.g. poetry), so that I can understand how to use the word in my own English speech and writing.
Further to the user story, LinguaSonnet’s primary audience is people studying and learning the English language. This may include users who are learning English as a second language or (in fact) anyone looking to expand their vocabulary of the English language.
Build
Phases of the Build
Proposal
-
Project conceptualisation: Consider ideas to meet the project brief, agree upon these and define the project title and description.
-
User story and audience: craft a user story and identify the primary audience.
Research
-
Potential APIs: explore options for APIs and read the subsequent API documentation.
-
Design resources: research options for images, font and other styling.
-
Front-end frameworks: consider possible options for frameworks and review Bootstrap’s documentation.
Planning
-
Tasks: identify the required tasks to build the project and the roles each project team member will take, create a Kanban Board with GitHub Projects to help visualise this and track progress.
-
Wireframes: create a visual representation of the project's interface, and create subsequent iterations/versions of this (as required).
Build
-
GitHub Repo: create a GitHub repository for the project.
-
HTML: create the basic structure of the HTML file, including links to front-end frameworks (as required).
-
CSS: create the CSS file, to style and layout the application.
-
JavaScript: write pseudocode to outline the logic and flow of the program, and build Javascript to implement the functionality of the application.
Built With
As per the project criteria, some of the application’s styling relies upon Bootstrap.
The application is built with vanilla javascript, and the javascript file has been commented throughout with pseudocode (breaking the project into tasks, and comments have been added to explain the functionality of the code).
The application also makes use of local storage to save users’ previously searched words and the following two APIs to retrieve word definitions and poems:
Design
Wireframes
-
Proposal stage
-
Redesigned structure
-
Mockups in Figma
Design Resources:
-
Quill Icon from FlatIcon.
-
Hero image from World Book Day (Freepik).
-
Serif Font: Solway Author: Mariya V. Pigoulevskaya,The Northern Block (Google Fonts).
-
Cursive Font: Rochester Author: Sideshow, Principal design (Google Fonts).
-
Serif Body Font: Noto Serif Open Font License (Google Fonts).
-
Color swatches (Coolors).
-
Initial Wireframe: Excalidraw
-
Final Wireframes: Figma
-
Fluid Jumbotron style containers and cards (Bootstrap).
-
Bootstrap cheatsheet (Hackertheme).
Installation
N/A
Usage
Users navigate to the webpage via the URL (LinguaSonnet). When on the page, users are presented with a navigation bar, hero banner, three horizontal sections (for the “Definition”, "Poetry” and “Previously Saved Words”) and a footer. The navigation bar contains the application’s name and logo (which, if selected by the user, refreshes the page) and links to the top of the page (“Home”) and the third section (“Previously Searched Words”).
The hero banner includes imagery, text to explain the application’s use, and an input field with a save button (for the user to enter and save a word).
Until the user saves a word and generates a definition and/or poem, the Definition, Poetry and Previously Saved Words sections remain unpopulated.
If the user selects the save button without entering text in the input field or includes white spaces, an error modal is displayed. Equally, if the user selects the generate definition or poem buttons without saving a word, an error modal is displayed.
Upon entering a word and selecting the save button, a confirmation message is displayed below the save button and a button (labelled with the user’s word) is displayed in the Previously Saved Words section. (This word is also saved to the browser). The user then has the option to generate a definition and/or poem via the respective buttons.
If the user’s word is unknown to the Dictionary API (e.g. not from the English language), an error modal will be displayed. If a poem including the user’s word cannot be found from the Poetry API, an error modal is displayed.
When a definition and/or poem has been found, these are displayed in their respective sections.
When the user selects a “previously saved word” button, the word is retrieved from the browser, a confirmation message is displayed below the save button, and the user has the option to generate a definition and/or poem for this word again.
On a resolution of 1400px, the application will load and display as follows:
On the same resolution where the user has successfully saved a word and generated a definition, the application will display as follows:
Credits
Credits have been included in the code comments of the javascript file and cited above (under Design Resources) and below (under References).
License
Distributed under the MIT License. See LICENSE.txt for more information.
Acknowledgments
The project team conceptualised, designed and built “LinguaSonnet”.
The team consists of @codeswitchstudio, @Code0Em and @Sandesh2034.
References
ChatGPT (2024) (https://chat.openai.com/chat).
Stack Overflow (2016) Fetch resolves even if 404?.
Mojtaba Seyedi (2022) Call modal manually with vanilla JavaScript in Bootstrap 5.