The aim of this project was to collaboratively build a web application, which meets the following criteria:
Bootstrap
and (at least) two server-side APIs.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.
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.
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.
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.
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.
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).
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.
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:
Proposal stage
Redesigned structure
Mockups in Figma
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).
N/A
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 have been included in the code comments of the javascript
file and cited above (under Design Resources) and below (under References).
Distributed under the MIT License. See LICENSE.txt
for more information.
The project team conceptualised, designed and built “LinguaSonnet”.
The team consists of @codeswitchstudio, @Code0Em and @Sandesh2034.
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.