Unable to find component: "wrestler-choice-box". If this is a built-in custom element, please ensure it is not included in component resolution

In my attempt to achieve a specific goal, I have an array of data that I want to incorporate into my HTML document along with a Vue component containing a template. My intention is to utilize list rendering so that the names and images from this array bind to the custom component props. However, I keep encountering the error mentioned in the title of this post. Below is the code snippet:

//############--wrestlers.js--############

//--------------- PAGE TITLE ---------------//
// Vue object: Title
const PageTitle = {
    data() {
        return {
            title: 'For Hire - Wrestlers'
        }
    }
}

Vue.createApp(PageTitle).mount('#page-title')

//--------------- NAVIGATION (Cart) ---------------//
// Vue object: Title
const CartTitle = {
    data() {
        return {
            cart_title: 'Cart'
        }
    }
}

Vue.createApp(CartTitle).mount('#cart-title')

//--------------- NAVIGATION (Main pages) ---------------//
// Vue object: Title
const MainNav = {
    data() {
        return {
            home: 'Home',
            for_hire: 'For Hire',
            about: 'About',
            contact_us: 'Contact Us',
            search: 'Search'
        }
    }
}

Vue.createApp(MainNav).mount('#nav-titles')

//--------------- Hiring selection - Wrestlers ---------------//
// Custom Vue Component: Binding information to each wrestler
const app = Vue.createApp({})

app.component("wrestler-choice-box", {
    props: ['name', 'image'],

    template: 
    `
    <div class = "option_container">
        <img class = "option_image" src = "image">
        <h4 class = "option_name">{{name}}</h4>
    </div>
    `
})

app.mount('#hire-wrestler-choice')



// Vue object: Wrestlers and information
var WrestlerData = Vue.createApp ({
    data() {
        return { 
            items: [
                {wrestler_name: 'Bobby Lashley', image_src: "../Assets/Wrestlers/wrestler_1.png" },
                {wrestler_name: 'Brock Lesnar', image_src: "../Assets/Wrestlers/wrestler_2.png" },
                {wrestler_name: 'Commander Azeez', image_src: "../Assets/Wrestlers/wrestler_3.png" },
                {wrestler_name: 'Drew McIntyre', image_src: "../Assets/Wrestlers/wrestler_4.png" },
                {wrestler_name: 'Gran Metalik', image_src: "../Assets/Wrestlers/wrestler_5.png" },
                {wrestler_name: 'Jeff Hardy', image_src: "../Assets/Wrestlers/wrestler_6.png" },
                {wrestler_name: 'John Cena', image_src: "../Assets/Wrestlers/wrestler_7.png" },
                {wrestler_name: 'Kevin Owens', image_src: "../Assets/Wrestlers/wrestler_8.png" },
                {wrestler_name: 'Lince Derado', image_src: "../Assets/Wrestlers/wrestler_9.png" },
                {wrestler_name: 'Pete Dunne', image_src: "../Assets/Wrestlers/wrestler_10.png" },
                {wrestler_name: 'Sheamus', image_src: "../Assets/Wrestlers/wrestler_11.png" },
                {wrestler_name: 'Undertaker', image_src: "../Assets/Wrestlers/wrestler_12.png" },
                {wrestler_name: 'Akira Tozawa', image_src: "../Assets/Wrestlers/wrestler_13.png" },
                {wrestler_name: 'Corey Grimes', image_src: "../Assets/Wrestlers/wrestler_14.png" },
                {wrestler_name: 'Jinder Mahal', image_src: "../Assets/Wrestlers/wrestler_15.png" },
                {wrestler_name: 'T-Bone', image_src: "../Assets/Wrestlers/wrestler_16.png" },
            ]
        }
    }
}).mount('#wrestler-data')
/* Stylesheet for SIT120 Project - wrestlers.css */
/*----------------------------------------------------*/

/*/////////////////////////-NO margins-//////////////////////////////*/
/* Expands to width of screen*/
body, html {
    margin: 0;
    padding: 0;
}

/*/////////////////////////-Header Navigation-//////////////////////////////*/

/* Top navigation (cart) */
.cart_nav ul {
    list-style-type: none;
    margin: auto;
    overflow: hidden;
    background-color: #C6393F; 
}

.cart_nav li {
    float: right;
}

.cart_nav li a {
    font-family: Actor;
    font-size: 18px;
    font-style: normal;
    font-weight:normal;
    padding: 15px 55px 15px 20px;
    color: white;
    display: inline-block;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    
}

.cart_nav li a:hover 
{
    color:#AAAAAA;
}

/*/////////////////////////-Cart Number-//////////////////////////////*/

/* Cart number (circled) */
.cart_items 
{
    font-family: Righteous;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color:#2C2C2C;
    float: right; 
    margin-top: 16px;
    margin-right: 16px;
    margin-left: -33px;
    border-radius: 60%;
    width: 25px;
    height: 22px;
    text-align: center; 
}

/*/////////////////////////-Cart icons-//////////////////////////////*/

/* Top navigation ICONS (cart) */
.cart_icon
{
    display:inline-flex;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-bottom: -15px;
    margin-right: -17px;
    padding-left: 8px;
}

/*/////////////////////////-Main navigation-//////////////////////////////*/

/* Main navigation (pages) */
.page_nav ul
{
    list-style-type: none;
    margin: auto;
    overflow: hidden;
    background-color: #2C2C2C;
}

.page_nav li 
{
    float: left;
}

.page_nav li a {
    font-family: Bai Jamjuree;
    font-size: 22px;
    font-weight: bold;
    padding: 15px;
    line-height: 22px;
    color: #AAAAAA;
    display: inline-block;
    padding: 40px 60px 35px 30px;
    text-decoration: none;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

.page_nav li a:hover 
{
    color:#FFFFFF;
}

.page_nav li a.active
{
    text-decoration: overline;
    color:#FFFFFF;

}
.page_nav li a:focus
{
    text-decoration: overline;
    color:#FFFFFF;

}




/*/////////////////////////-Navigation icon (Search)-//////////////////////////////*/

/* Main navigation search ICON */
.search_icon
{
    display:inline-block;
    width: 35px;
    height: 37px;
    margin-top: -40px;
    margin-bottom: -15px;
    margin-right: -50px;
    padding-left: 13px;
    padding-right: 45px;
}

/*/////////////////////////-LOGO-//////////////////////////////*/

 /* Main logo (Wrestle Hire logo) */
.site_logo
{
    display: inline;
    float: left;
    width: 180px;
    height: 145px; 
    padding-right: 50px;
    margin-bottom: -20px;
    margin-left: -30px;
    margin-top: -10px;
}

.site_logo:hover
{
    cursor: pointer;
}

/*/////////////////////////-Hiring selection - Wrestlers-//////////////////////////////*/
.option_row
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}

.option_container
{
    flex-basis: 20%;
    padding: 17px;
    min-width: 200px;
    transition: transform 0.5s;
    transition: 0.5s;
}

.option_container:hover
{
    transform: translateY(-3px);
    box-shadow: 0 0 15px #C6393F;
    border-radius: 3px;
}

.option_image
{
    width: 100%;
    transition: 0.5s;
}

.option_list_container
{
    margin: auto;
    padding-left: 40px;
    padding-right: 40px;
}

.option_name
{
    font-family: Bai Jamjuree;
    font-size: 1.2em;
    margin-top: -1px;
}

.rating
{
    color: #C6393F;
    margin-top: -20px;
}

Please disregard the missing images as they are located on my PC and referenced in a folder

If you spot the issue, kindly point it out as I've been struggling to identify it

Thank you :)

javascripthtmlvue.jsvue-componentvuejs3

Answer №1

There seems to be a problem with your Mounting process. It looks like you are referencing the wrong ID.

app.mount('#hire-wrestler-choice')

In your HTML, the ID you are trying to call is set within the component itself:

<wrestler-choice-box id ="hire-wrestler-choice" v-for="item in items" :name="item.wrestler_name" :image="item.image_src">
                </wrestler-choice-box>

To access the component, you need to mount it onto an existing HTML element, like this:

app.mount('#wrestler-data')

Please note that using a placeholder app just for mounting may not be necessary. I recommend adding your component directly to your wrestlerData instance instead.

//############--wrestlers.js--############

//--------------- PAGE TITLE ---------------//
// Vue object: Title
const PageTitle = {
  data() {
    return {
      title: 'For Hire - Wrestlers'
    }
  }
}

Vue.createApp(PageTitle).mount('#page-title')

//--------------- NAVIGATION (Cart) ---------------//
// Vue object: Title
const CartTitle = {
  data() {
    return {
      cart_title: 'Cart'
    }
  }
}

Vue.createApp(CartTitle).mount('#cart-title')

//--------------- NAVIGATION (Main pages) ---------------//
// Vue object: Title
const MainNav = {
  data() {
    return {
      home: 'Home',
      for_hire: 'For Hire',
      about: 'About',
      contact_us: 'Contact Us',
      search: 'Search'
    }
  }
}

Vue.createApp(MainNav).mount('#nav-titles')

//--------------- Hiring selection - Wrestlers ---------------//
// Custom Vue Component: Binding information to each wrestler
const wrestlerChoiceBox = {
  name: 'wrestler-choice-box',
  props: ['name', 'image'],
  template: `
    <div class = "option_container">
        <img class = "option_image" :src="image">
        <h4 class = "option_name">{{name}}</h4>
    </div>
    `
};

// Vue object: Wrestlers and information
var WrestlerData = Vue.createApp({
  data() {
    return {
      items: [{
          wrestler_name: 'Bobby Lashley',
          image_src: "../Assets/Wrestlers/wrestler_1.png"
        },
        {
          wrestler_name: 'Brock Lesnar',
          image_src: "../Assets/Wrestlers/wrestler_2.png"
        },
        {
          wrestler_name: 'Commander Azeez',
          image_src: "../Assets/Wrestlers/wrestler_3.png"
        },
        {
          wrestler_name: 'Drew McIntyre',
          image_src: "../Assets/Wrestlers/wrestler_4.png"
        },
        {
          wrestler_name: 'Gran Metalik',
          image_src: "../Assets/Wrestlers/wrestler_5.png"
        },
        {
          wrestler_name: 'Jeff Hardy',
          image_src: "../Assets/Wrestlers/wrestler_6.png"
        },
        {
          wrestler_name: 'John Cena',
          image_src: "../Assets/Wrestlers/wrestler_7.png"
        },
        {
          wrestler_name: 'Kevin Owens',
          image_src: "../Assets/Wrestlers/wrestler_8.png"
        },
        {
          wrestler_name: 'Lince Derado',
          image_src: "../Assets/Wrestlers/wrestler_9.png"
        },
        {
          wrestler_name: 'Pete Dunne',
          image_src: "../Assets/Wrestlers/wrestler_10.png"
        },
        {
          wrestler_name: 'Sheamus',
          image_src: "../Assets/Wrestlers/wrestler_11.png"
        },
        {
          wrestler_name: 'Undertaker',
          image_src: "../Assets/Wrestlers/wrestler_12.png"
        },
        {
          wrestler_name: 'Akira Tozawa',
          image_src: "../Assets/Wrestlers/wrestler_13.png"
        },
        {
          wrestler_name: 'Corey Grimes',
          image_src: "../Assets/Wrestlers/wrestler_14.png"
        },
        {
          wrestler_name: 'Jinder Mahal',
          image_src: "../Assets/Wrestlers/wrestler_15.png"
        },
        {
          wrestler_name: 'T-Bone',
          image_src: "../Assets/Wrestlers/wrestler_16.png"
        },
      ]
    }
  }
});
WrestlerData.component('wrestler-choice-box',wrestlerChoiceBox);
WrestlerData.mount('#wrestler-data');
/* Stylesheet for SIT120 Project - wrestlers.css */


/*----------------------------------------------------*/


/*/////////////////////////-NO margins-//////////////////////////////*/


/* Expands to width of screen*/

body,
html {
  margin: 0;
  padding: 0;
}


/*/////////////////////////-Header Navigation-//////////////////////////////*/


/* Top navigation (cart) */

.cart_nav ul {
  list-style-type: none;
  margin: auto;
  overflow: hidden;
  background-color: #C6393F;
}

.cart_nav li {
  float: right;
}

.cart_nav li a {
  font-family: Actor;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  padding: 15px 55px 15px 20px;
  color: white;
  display: inline-block;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
}

.cart_nav li a:hover {
  color: #AAAAAA;
}


/*/////////////////////////-Cart Number-//////////////////////////////*/


/* Cart number (circled) */

.cart_items {
  font-family: Righteous;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background-color: #2C2C2C;
  float: right;
  margin-top: 16px;
  margin-right: 16px;
  margin-left: -33px;
  border-radius: 60%;
  width: 25px;
  height: 22px;
  text-align: center;
}


/*/////////////////////////-Cart icons-//////////////////////////////*/


/* Top navigation ICONS (cart) */

.cart_icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-bottom: -15px;
  margin-right: -17px;
  padding-left: 8px;
}


/*/////////////////////////-Main navigation-//////////////////////////////*/


/* Main navigation (pages) */

.page_nav ul {
  list-style-type: none;
  margin: auto;
  overflow: hidden;
  background-color: #2C2C2C;
}

.page_nav li {
  float: left;
}

.page_nav li a {
  font-family: Bai Jamjuree;
  font-size: 22px;
  font-weight: bold;
  padding: 15px;
  line-height: 22px;
  color: #AAAAAA;
  display: inline-block;
  padding: 40px 60px 35px 30px;
  text-decoration: none;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}

.page_nav li a:hover {
  color: #FFFFFF;
}

.page_nav li a.active {
  text-decoration: overline;
  color: #FFFFFF;
}

.page_nav li a:focus {
  text-decoration: overline;
  color: #FFFFFF;
}


/*/////////////////////////-Navigation icon (Search)-//////////////////////////////*/


/* Main navigation search ICON */

.search_icon {
  display: inline-block;
  width: 35px;
  height: 37px;
  margin-top: -40px;
  margin-bottom: -15px;
  margin-right: -50px;
  padding-left: 13px;
  padding-right: 45px;
}


/*/////////////////////////-LOGO-//////////////////////////////*/


/* Main logo (Wrestle Hire logo) */

.site_logo {
  display: inline;
  float: left;
  width: 180px;
  height: 145px;
  padding-right: 50px;
  margin-bottom: -20px;
  margin-left: -30px;
  margin-top: -10px;
}

.site_logo:hover {
  cursor: pointer;
}


/*/////////////////////////-Hiring selection - Wrestlers-//////////////////////////////*/

.option_row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

.option_container {
  flex-basis: 20%;
  padding: 17px;
  min-width: 200px;
  transition: transform 0.5s;
  transition: 0.5s;
}

.option_container:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px #C6393F;
  border-radius: 3px;
}

option_image {
  width: 100%;
  transition: 0.5s;
}

.option_list_container {
  margin: auto;
  padding-left: 40px;
  padding-right: 40px;
}

option_name {
  font-family: Bai Jamjuree;
  font-size: 1.2em;
  margin-top: -1px;
}

.rating {
  color: #C6393F;
  margin-top: -20px;
}
<!--HTML FILE: wrestlers.html-->

<!DOCTYPE html>
<html>

<head>
  <!--Stylesheets-->
  <link rel="stylesheet" type="text/css" href="wrestlers.css">

  <!--Link Vue Framework-->
  <script src="https://unpkg.com/vue@next"></script>

  <!-- Set responsiveness to screen size -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!--Google fonts-->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Actor">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bai Jamjuree">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel">

  <!--Star icon (Font Awesome)-->
  <script src="https://use.fontawesome.com/d83f9b7e69.js"></script>


  <!--Page Icon-->
  <link rel="icon" href="../Assets/page_icon.png">

  <!-- Page title-->
  <title id="page-title">{{title}}</title>
</head>

<body>
  <!--NAVIGATION-->
  <header>
    <!--Top navigation section (login, account and cart)-->
    <div class="cart_nav" id="cart-title">
      <ul>
        <div class="cart_items">0</div>
        <li><a href="#cart">{{cart_title}}<img class = "cart_icon" src="../Assets/cart.png" alt="cart_icon"></a></li>
      </ul>
    </div>

    <!--Main navigation section (main pages)-->
    <div class="page_nav" id="nav-titles">
      <ul>
        <!--All main pages will have .html files, this example has the contact as a separate file (and empty files)-->
        <a href="../Home/home.html"><img href="../Home/home.html" class="site_logo" id="siteLogo" src="../Assets/website_logo.png" /></a>
        <li><a href="../Home/home.html">{{home}}</a></li>
        <li><a href="">{{for_hire}}</a></li>
        <li><a href="">{{about}}</a></li>
        <li><a href="../Contact/contact.html">{{contact_us}}</a></li>
        <li class="search" style="float:right"><a>{{search}}<img class = "search_icon" src="../Assets/search.png" alt="search_icon"></a></li>
      </ul>
    </div>
  </header>

  <!--Wrestlers-->
  <div class="small_container" id="wrestler-data">
      <wrestler-choice-box v-for="item in items" :name="item.wrestler_name" :image="item.image_src">
      </wrestler-choice-box>
  </div>
</body>

<!-- Link JavaScript file -->
<script src="wrestlers.js"></script>

</html>

If you eliminate the var app and integrate the component into your wrestlerData instance, you should be able to access the required data for iteration.

Get more insights from the following link: Component Registration

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to convert a circular JSON object to a string

Is there a way to stringify a complex JSON object without encountering the "Converting circular structure to JSON" error? I also need its parser. I am facing issues every time I try to use JSON.stringify and encounter the "Converting circular structure to ...

javascriptjson

There is an issue as headers cannot be changed after being set for the client

I am in the process of developing an employee leave management system. Everything runs smoothly until an issue arises when attempting to update the leave status as an admin, and the logged-in account or user does not have admin privileges. There is a midd ...

javascriptnode.jsexpresscustom-error-handling

Using an HTML img tag without success, despite having the correct link

My HTML img tags are not working even though the link is correct. I have been attempting to resolve this issue for quite some time by researching multiple websites and trying various solutions, but unfortunately, nothing seems to be working. All I want i ...

htmlimagesrc

Navigating AngularJS with multiple external files and folders

Recently dove into Angular and hit a roadblock with routing. I followed the setup instructions, but for some reason it's not functioning as expected. index.html: <!DOCTYPE html> <html lang="en> <head> <meta charset="utf-8> ...

javascriptangularjsroutesngrouteng-view

What is the best way to conceal a paragraph with v-if within the context of Vuex?

I have been working on a small app that involves clicking a button to hide a paragraph, but I am using vuex for implementation purposes. The Home.vue file contains the paragraph and the About.vue file has the button. I want the paragraph to disappear bas ...

vue.jsvuexnuxt.js

Extract a specific pattern from a string using Javascript

Currently, I am attempting to extract a specific string from a tag in javascript using the following code: document.querySelector('.title h2').textContent However, when I execute this code, I am getting a result that includes unnecessary double ...

javascripthtml

Persistent vertical menu dropdown that remains expanded on sub menu pages

I am struggling to understand how to keep my menu sub items open when on the active page. Although I have tried similar solutions, I have not been successful in implementing them. I apologize if this question has been asked before. My approach involves usi ...

javascriptjqueryhtmlcss

Grabbing a section of a URL through a bookmarklet: A simple guide

Recently, I've been using this handy bookmarklet: javascript:currentUrl=document.location.href;document.location.assign(currentUrl+'embed'); This neat tool grabs the current URL, such as www.example.com/knZg_INW8fL/, and adds embed to it f ...

javascriptbookmarklet

Arrange a div element within another div by utilizing the fixed positioning property, while also accounting for any potential "white space

Can someone help me figure this out: I currently have this much progress: http://jsbin.com/apikiw/3/edit#preview The issue I'm facing is that I am unable to insert it between the <p /> tags due to its dynamic nature... any solutions or suggest ...

javascriptjqueryhtmlcss

Substitute placeholders in array with information using a loop

I have a question regarding implementing an autosort feature in JavaScript. I want my page to automatically sort data rows based on different time intervals selected by the user through checkboxes. The data updates every 3 seconds, and the autosort functio ...

javascriptjquery

Experiencing unexpected behavior with React Redux in combination with Next.js and NodeJS

I'm in the process of developing an application using Next.js along with redux by utilizing this particular example. Below is a snippet from my store.js: // REDUCERS const authReducer = (state = null, action) => { switch (action.type){ ...

javascriptnode.jsreactjsreduxnext.js

There was an issue with the origin null not being permitted by Access-Control-Allow-Origin

Possible Duplicate: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin I am currently working on a weather application that runs smoothly in browsers. However, when I try to deploy it on my Android phone, it encounters iss ...

javascriptandroidjquerycordova

Unlocking Column Data Tooltips in Angular Datatables: A Step-by-Step Guide

I have a single datatable and was wondering how to implement tooltips for when hovering over table cells. I tried the following code snippet, which successfully populated the tooltips. However, I am interested in achieving the same functionality using Angu ...

javascriptangulartypescriptangular-datatables

Enhance your message inbox experience with jQuery/Javascript features inspired by Gmail, including the ability to select all messages with a checkbox and

It is truly satisfying to be here working on developing a private message inbox for my website, especially after successfully implementing a complete user signup/login and activation system. A few months ago, I never believed I had enough patience to grasp ...

phpjavascriptjquerymysqlhtml

Using AngularJS client and Flask server for a RESTful call, one can include the

I am currently facing an issue where I need to send a REST request from my AngularJs client to a Flask server. The problem arises when one of the ids (key) in the request contains a forward slash. Interestingly, if the key does not contain a slash, the re ...

javascriptpythonangularjsrestflask

Is there a way to have my code run a script only once right after a component has finished loading?

I am currently developing a web application using Vuejs and implementing the vue-router with single file components. One issue I am facing is that whenever a user navigates to a specific route, the created() function within the component gets triggered. T ...

javascriptvue.jsvue-router

Utilizing ES6 imports with module names instead of paths

Is there a way to import modules using just their name without the full path? For instance, can I simply use: import ViewportChecker from 'viewport-checker'; instead of import ViewportChecker from '../ViewportChecker'; I'd ...

javascriptnode.jsnpm

React useState Error: Exceeded maximum re-renders. React enforces a limit on the number of renders to avoid getting stuck in an endless loop

Can someone help me troubleshoot the 'Too many re-renders' error I'm encountering? I've implemented the try, catch method along with React hooks like useState and setState. My goal is to fetch data from an API and display it on a ...

javascriptreactjs

What is the method for executing code in HTML without needing a beginning or ending tag?

I have created a code that creates a shape which alternates between the colors green and blue, along with changing text from 'Hi' to 'Hello' when a button is clicked. Now, I am looking for a way to make this transition happen automatica ...

javascripthtmlcss

The integration of HTML and CSS using ng-bind-html appears to be malfunctioning

<ion-item ng-bind-html="renderHtml(word[key])"> </ion-item> When referring to word[key], it represents: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> This is the CSS being u ...

javascripthtmlcssangularjs